﻿Ext.form.TreeField = Ext.extend(Ext.form.TriggerField, {

    //#region 属性
    /**
    * @cfg {Boolean} readOnly
    * 设置为只读状态
    * 
    */
    readOnly: true,
    /**
    * @cfg {String} displayField
    * 用于显示数据的字段名
    * 
    */
    displayField: 'text',
    /**
    * @cfg {String} valueField
    * 用于保存真实数据的字段名
    */
    valueField: 'id',
    /**
    * @cfg {String} hiddenName
    * 保存真实数据的隐藏域名
    */
    hiddenName: null,
    /**
    * @cfg {Integer} listWidth
    * 下拉框的宽度
    */
    listWidth: null,
    /**
    * @cfg {Integer} minListWidth
    * 下拉框最小宽度
    */
    minListWidth: 50,
    /**
    * @cfg {Integer} listHeight
    * 下拉框高度
    */
    listHeight: null,
    /**
    * @cfg {Integer} minListHeight
    * 下拉框最小高度
    */
    minListHeight: 50,
    /**
    * @cfg {String} dataUrl
    * 数据地址
    */
    dataUrl: null,
    /**
    * @cfg {Ext.tree.TreePanel} tree
    * 下拉框中的树
    */
    tree: null,
    /**
    * @cfg {String} value
    * 默认值
    */
    value: null,
    /**
    * @cfg {String} displayValue
    * 用于显示的默认值
    */
    displayValue: null,
    /**
    * @cfg {Object} baseParams
    * 向后台传递的参数集合
    */
    baseParams: {},
    syncParams: 'deptId=0&values=""',
    /**
    * @cfg {Object} treeRootConfig
    * 树根节点的配置参数
    */
    treeRootConfig: {
        id: 0,
        text: '太阳神直销总部(根)',
        draggable: false
    },
    /**
    * @cfg {String/Object} autoCreate
    * A DomHelper element spec, or true for a default element spec (defaults to
    * {tag: "input", type: "text", size: "24", autocomplete: "off"})
    */
    defaultAutoCreate: { tag: "input", type: "text", size: "24", autocomplete: "off" },
    hasCheckBox: false,
    //多选: 'multiple'(默认)
    //单选: 'single'
    //级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)
    checkModel: 'multiple',
    //#endregion

    initComponent: function () {
        Ext.form.TreeField.superclass.initComponent.call(this);
        this.addEvents(
				'select',
				'expand',
				'collapse',
				'beforeselect'
		);
    },
    onRender: function (ct, position) {
        Ext.form.TreeField.superclass.onRender.call(this, ct, position);
        if (this.hiddenName) {
            this.hiddenField = this.el.insertSibling({ tag: 'input',
                type: 'hidden',
                name: this.hiddenName,
                id: (this.hiddenId || this.hiddenName)
            }, 'before', true);
            this.hiddenField.value =
                this.hiddenValue !== undefined ? this.hiddenValue :
                this.value !== undefined ? this.value : '';
            this.el.dom.removeAttribute('name');
        }
        if (Ext.isGecko) {
            this.el.dom.setAttribute('autocomplete', 'off');
        }
        this.initList();
    },
    initList: function () {
        if (!this.list) {
            var cls = 'x-treefield-list';

            this.list = new Ext.Layer({
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain: false
            });

            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            this.list.swallowEvent('mousewheel');

            this.innerList = this.list.createChild({ cls: cls + '-inner' });
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
            this.innerList.setHeight(this.listHeight || this.minListHeight);
            if (!this.tree) {
                this.tree = this.createTree(this.innerList);
            }
            this.tree.on('click', this.select, this);
            this.tree.render();
        }
    },
    createTree: function (el) {
        var Tree = Ext.tree;
        var treeLoader;
        if (this.hasCheckBox) {
            treeLoader = new Tree.TreeLoader({
                dataUrl: this.dataUrl,
                baseParams: this.baseParams,
                baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI} //添加 uiProvider 属性
            });
        }
        else {
            treeLoader = new Tree.TreeLoader({
                dataUrl: this.dataUrl,
                baseParams: this.baseParams
            });
        }
        var tree;

        //#region 同步请求+静态树
        var conn = Ext.lib.Ajax.getConnectionObject().conn;
        conn.open("post", this.dataUrl, false);
        conn.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
        conn.send(this.syncParams);
        var obj = Ext.util.JSON.decode(conn.responseText);
        tree = new Tree.TreePanel({
            el: el,
            autoScroll: true,
            animate: true,
            containerScroll: true,
            checkModel: this.checkModel,
            rootVisible: false,
            loader: treeLoader,
            root: new Tree.AsyncTreeNode({
                id: 0,
                text: '太阳神直销总部(根)',
                draggable: false,
                children: obj
            })
        });
        //#endregion

        //#region //异步请求+动态树,未使用
        /*tree = new Tree.TreePanel({
        el: el,
        autoScroll: true,
        animate: true,
        containerScroll: true,
        checkModel: this.checkModel,
        rootVisible: false,
        loader: treeLoader
        });
        var root = new Tree.AsyncTreeNode(this.treeRootConfig);
        tree.setRootNode(root);*/
        //#endregion

        return tree;
    },
    select: function (node) {
        if (this.fireEvent('beforeselect', node, this) != false) {
            this.onSelect(node);
            this.fireEvent('select', this, node);
        }
    },
    onSelect: function (node) {
        if (!this.hasCheckBox) {
            this.setValue(node);
            this.collapse();
        }
    },
    getValue: function () {
        if (this.valueField) {
            return typeof this.value != 'undefined' ? this.value : '';
        } else {
            return Ext.form.TreeField.superclass.getValue.call(this);
        }
    },
    setValue: function (node) {
        //if(!node)return;
        var text, value;
        if (node && typeof node == 'object') {
            text = node[this.displayField];
            value = node[this.valueField || this.displayField];
        } else {
            text = node;
            value = node;
        }
        if (this.hiddenField) {
            this.hiddenField.value = value;
        }
        Ext.form.TreeField.superclass.setValue.call(this, text);
        this.value = value;
    },
    onResize: function (w, h) {
        Ext.form.TreeField.superclass.onResize.apply(this, arguments);
        if (this.list && this.listWidth == null) {
            var lw = Math.max(w, this.minListWidth);
            this.list.setWidth(lw);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
        }
    },
    validateBlur: function () {
        return !this.list || !this.list.isVisible();
    },
    onDestroy: function () {
        if (this.list) {
            this.list.destroy();
        }
        if (this.wrap) {
            this.wrap.remove();
        }
        Ext.form.TreeField.superclass.onDestroy.call(this);
    },
    collapseIf: function (e) {
        if (!e.within(this.wrap) && !e.within(this.list)) {
            this.collapse();
        }
    },
    setValues: function () {
        var choosedNodes = this.tree.getChecked();
        var nodeIds = "";
        var nodeNames = "";
        for (var i = 0; i < choosedNodes.length; i++) {
            var empId = choosedNodes[i].id;
            var empName = choosedNodes[i].text;
            if (empId.indexOf("EmpId") > -1) {//人员工号格式:EmpId~
                nodeIds += "," + empId.replace("EmpId", "");
                nodeNames += "," + empName;
            }
        }
        if (nodeIds.length > 0) {
            nodeIds = nodeIds.substr(1);
            nodeNames = nodeNames.substr(1);
            if (this.hiddenField) {
                this.hiddenField.value = nodeIds;
            }
            Ext.form.TreeField.superclass.setValue.call(this, nodeNames);
            this.value = nodeIds;
        }
        else {
            if (this.hiddenField) {
                this.hiddenField.value = '';
            }
            Ext.form.TreeField.superclass.setValue.call(this, '');
            this.value = '';
        }
    },
    collapse: function () {
        if (!this.isExpanded()) {
            return;
        }
        if (this.hasCheckBox) {
            this.setValues();
        }
        //alert(this.tree.root.childNodes.length);
        this.list.hide();
        Ext.getDoc().un('mousewheel', this.collapseIf, this);
        Ext.getDoc().un('mousedown', this.collapseIf, this);
        this.fireEvent('collapse', this);
    },
    expand: function () {
        if (this.isExpanded() || !this.hasFocus) {
            return;
        }
        this.onExpand();
        this.list.alignTo(this.wrap, this.listAlign);
        this.list.show();
        Ext.getDoc().on('mousewheel', this.collapseIf, this);
        Ext.getDoc().on('mousedown', this.collapseIf, this);
        this.fireEvent('expand', this);
    },
    onExpand: function () {
        var doc = Ext.getDoc();
        this.on('click', function () { alert(111) }, this);
    },
    isExpanded: function () {
        return this.list && this.list.isVisible();
    },
    onTriggerClick: function () {
        if (this.disabled) {
            return;
        }
        if (this.isExpanded()) {
            this.collapse();
        } else {
            this.onFocus({});
            this.expand();
        }
        this.el.focus();
    }
});